<template>
	<div id="bg" class="w-h-100" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex">
			<el-card class="box-card" shadow="never" :body-style="{ paddingBottom: '0' }">
				<search ref="searchRef" v-bind="drillSearch" @queryAction="query"> </search>
			</el-card>

			<el-card class="w-h-100 flex-1 box-card" style="margin-top: 16px" shadow="never" :body-style="{ paddingBottom: '0' }">
				<inscroll-table :data-list="list" v-bind="drillTableConfig" :dataCount="Number(totalRows)" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange">
					<template #d_ExerciseTime="scope">
						<div style="display: flex; justify-content: center; align-items: center">
							<div style="margin-right: 7px">{{ formatTime(scope.row.d_ExerciseTime).currentDay }}</div>

							<template v-if="showType(scope.row.d_ExerciseTime, new Date()) && !(scope.row.c_CheckResult == 'OK' || scope.row.c_CheckResult == 'NG')">
								<div
									style="width: 80px; padding: 0px 5px; border-radius: 3px; font-size: 12px; display: flex; justify-content: center; align-items: center"
									:style="{ backgroundColor: showType(scope.row.d_ExerciseTime, new Date()) == 1 ? '#008aff' : showType(scope.row.d_ExerciseTime, new Date()) == 2 ? '#eebd73' : '#f56c6c' }"
								>
									<div style="color: white; width: 70px; cursor: default">
										{{
											showType(scope.row.d_ExerciseTime, new Date()) == 1
												? $t('zxGaloajaAo1yMttcResult')
												: showType(scope.row.d_ExerciseTime, new Date()) == 2
												? $t('zxGaloajaAo1yMttcSx') + `${Math.abs(getDaysDifference(scope.row.d_ExerciseTime, new Date()))}` + $t('zxGaloajaAo1yMttcDay')
												: $t('zxGaloajaAo1yMttcYq') + `${Math.abs(getDaysDifference(scope.row.d_ExerciseTime, new Date()))}` + $t('zxGaloajaAo1yMttcDay')
										}}
									</div>
								</div>
							</template>
						</div>
					</template>
					<template #c_CheckResult="scope">
						<div :style="{ color: scope.row.c_CheckResult == 'OK' ? '#2b9142' : '#e94639' }">{{ scope.row.c_CheckResult }}</div>
					</template>
					<template #file="scope">
						<div style="cursor: pointer" @click="fileClick(scope.row.v_ExerciseFilePath)">{{ scope.row.v_ExerciseFilePath?.length > 0 ? $t('2KyEk7Ir2Lz3bN9ByjSaE') : $t('66gSt7xsIbieLa59Td1H') }}</div>
					</template>
					<template #operation="scope">
						<div>
							<el-button
								icon="ele-Document"
								@click="
									() => {
										detailAction(scope.row);
									}
								"
								type="primary"
								size="small"
								text
							>
								{{ $t('ucC9qxHvkvdh9OGEo1pn') }}
							</el-button>
							<el-button
								icon="ele-Edit"
								@click="
									() => {
										changeAction(scope.row);
									}
								"
								type="primary"
								size="small"
								text
								:disabled="scope.row.c_CheckResult == 'OK' || scope.row.c_CheckResult == 'NG'"
								v-if="$hasPer('drillImple:change')"

							>
								{{ $t('kiUkiqa3h0HLymgh7eEb') }}
							</el-button>
							<!-- <el-button icon="ele-Folder" v-if="scope.row.v_ExerciseFilePath?.length > 0" type="success" @click="pushFile(scope.row.v_ExerciseFilePath)" text size="small">{{
								$t('s4KbtSrTfOzuWyRcHgTxx')
							}}</el-button> -->
						</div>
					</template>
				</inscroll-table>
			</el-card>
		</div>
		<drill-form ref="formRef" @submit="(param: any) => submitHandle(param)"></drill-form>
		<VModel :fileInfo="fileInfo" :isModelDialog="isModelDialog" @cancelModelClick="cancelModelClick" />

	</div>
</template>

<script lang="ts" setup>
import { inscrollTable, drillTableConfig } from './config/table/index';
import { search, drillSearch } from './config/search/index';
import { ref } from 'vue';
import drillForm from './component/add-drill-implementation.vue';
import { formatTime, getDaysDifference } from '/@/utils/hook/index';
import { IPostDrillType } from '/@/types/ys/index';
import eventBus from '/@/utils/eventBus';
import { uploadFiles } from '/@/utils/hook/index';
import getStaticTableData from '/@/utils/staticGetTableData';
import { getExerciseList, postChangeExercise } from '/@/api/safety-play/drillAPI';
const formRef = ref();
const { list, totalRows, handleSizeChange, handleCurrentChange, getData } = getStaticTableData(getExerciseList, {}, drillSearch.searchObj);

import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

import VModel from '../components/v-model.vue';

const { proxy } = useCurrentInstance();
const $t = proxy.$t;

//附件删除后刷新列表
eventBus.on('getData', getData);
const detailAction = (data: any) => {
	formRef.value.detail(data);
};
let currentSelectData: any;
//修改
const changeAction = (data: any) => {
	currentSelectData = data;
	formRef.value.change(data);
};

const query = () => {
	getData();
};

const submitHandle = async (param: any) => {
	let postData: IPostDrillType = {
		V_ExerciseName: param.v_ExerciseName,
		N_ProjectId: currentSelectData.v_ProjectName == param.n_ProjectId ? currentSelectData.n_ProjectId : param.n_ProjectId,
		V_OrganizeUnit: param.v_OrganizeUnit,
		N_BlameEmp: currentSelectData.v_BlameEmpName == param.n_BlameEmp ? currentSelectData.n_BlameEmp : param.n_BlameEmp,
		V_ExerciseAddress: param.v_ExerciseAddress,
		D_ExerciseTime: param.d_ExerciseTime,
		V_JoinUnit: param.v_JoinUnit,
		V_Remake: param.v_Remake,
		N_RecordEmp: param.n_RecordEmp == currentSelectData.v_RecordEmpName ? currentSelectData.n_RecordEmp : param.n_RecordEmp,
		N_PlanFileId: currentSelectData.n_PlanFileId || 0,
		N_ExerciseFileId: currentSelectData.n_ExerciseFileId || 0,
		C_CheckResult: param.c_CheckResult,
	};
	if (formRef.value.fileList.length > 0) {
		await uploadFiles(postData.N_ExerciseFileId, formRef.value.fileList);
	}
	postData.n_Id = currentSelectData.n_Id;
	await postChangeExercise(postData);
	console.log('postData', postData);
	getData();
};

const showType = (one: any, two: any) => {
	if (getDaysDifference(one, two) == 0) {
		return 1;
	} else if (getDaysDifference(one, two) <= 3 && getDaysDifference(one, two) > 0) {
		return 2; //还剩
	} else if (getDaysDifference(one, two) < 0) {
		return 3; //逾期
	}
	return 0;
};

const isModelDialog = ref(false);
const cancelModelClick = () => {
	isModelDialog.value = false;
};
const fileInfo = ref('');
/*** 查看文件 */
const fileClick = (val: any) => {
	if (val.length == 0 || val == null) {
		return;
	}
	isModelDialog.value = true;
	let setObj: any = {};
	setObj.titleInfo = $t('s4KbtSrTfOzuWyRcHgTxx');
	setObj.rectifyListArr = val;
	fileInfo.value = JSON.stringify(setObj);
};
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style lang="scss" scoped>
#bg {
	:deep(.el-card__body) {
		height: 100%;
	}
}
</style>
